<!-- 数据操作组件 -->
<template>
    <a-modal :title='title' :visible='visible' :confirm-loading='confirmLoading' @ok='handleOk' @cancel='close' :width='666'
        :destroyOnClose='true'>
        <a-form-model ref='ruleForm' :model='model' :rules='rules' :label-col='labelCol' :wrapper-col='wrapperCol'>
            <a-form-model-item label='接口名称' ref='authorityName' prop='authorityName'>
                <a-input placeholder='请输入接口名称' allowClear v-model='model.authorityName' />
            </a-form-model-item>
            <a-form-model-item label='接口编码' ref='authorityCode' prop='authorityCode' v-if="model.authorityType === 1">
                <a-input placeholder='请输入接口编码' allowClear v-model='model.authorityCode' />
            </a-form-model-item>
            <a-form-model-item label='接口描述' ref='authorityDesc' prop='authorityDesc'>
                <a-input placeholder='请输入接口描述' allowClear v-model='model.authorityDesc' />
            </a-form-model-item>
            <a-form-model-item label='接口地址' ref='uri' prop='uri' v-if="model.authorityType === 1">
                <a-input placeholder='请输入接口地址' allowClear v-model='model.uri' />
            </a-form-model-item>
            <a-form-model-item label='请求方式' ref='actions' prop='actions' v-if="model.authorityType === 1">
                <a-select v-model='model.actions'>
                    <a-select-option :value="item.value" v-for="(item, index) in action" :key="index">
                        {{ item.label }}
                    </a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item label='类型' ref='authorityType' prop='authorityType'>
                <a-select v-model="model.authorityType" allowClear :disabled="model.id">
                    <a-select-option v-for="(item, index) in type" :key="index" :value="item.value">
                        {{ item.label }}
                    </a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item label='状态是否正常' ref='useStatus' prop='useStatus'>
                <aSelectTorF v-model='model.useStatus' allowClear></aSelectTorF>
            </a-form-model-item>
            <a-form-model-item label='可访问角色' ref='roles' prop='roles' v-if="model.authorityType === 1">
                <a-select v-model="model.roles" mode="multiple" style="width: 100%" placeholder="全角色放行">
                    <a-select-option v-for="value in roleData" :key="value.id">
                        {{ value.roleName }}
                    </a-select-option>
                </a-select>
            </a-form-model-item>
        </a-form-model>
    </a-modal>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { model, rules, action, type } from './save';
import { cleanObject } from '@/utils/CommonUtil'
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Modal',
    // 子组件参数列表
    props: {},
    //import引入的组件需要注入到对象中才能使用
    components: {  },
    data() {
        //这里存放数据
        return {
            api: {
                detail: '/admin_server/auth/authority/', // 详情
                save: '/admin_server/auth/authority/save', // 新增
                update: '/admin_server/auth/authority/update', // 修改
            },
            title: '',
            visible: false, // 数据操作组件是否打开
            confirmLoading: false, // 提交按钮loading
            model, // 数据传输模型
            rules, // 数据输入校验
            labelCol: { span: 4 }, // label占位尺寸
            wrapperCol: { span: 18 }, // 输入框占位尺寸
            action,
            type,
            roleData: [],
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {

    },
    //方法集合
    methods: {
        handleOk() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.confirmLoading = true;
                    if (this.model.id) {
                        this.$request
                            .post2(this.api.update, this.model)
                            .then((res) => {
                                if (res.success) {
                                    this.$message.success('更新成功');
                                    this.$emit('handleOk');
                                }
                                this.confirmLoading = false;
                            });
                    } else {
                        this.$request
                            .post2(this.api.save, this.model)
                            .then((res) => {
                                if (res.success) {
                                    this.$message.success('添加成功');
                                    this.$emit('handleOk');
                                }
                                this.confirmLoading = false;
                            });
                    }
                }
            });
        },
        resetForm() {
            cleanObject(this.model);
            this.model.roles = []
        },
        async init(id, title, roleData, pid) {
            this.title = title;
            this.roleData = roleData
            this.visible = true;
            this.$nextTick(() => {
                this.$refs.ruleForm.resetFields()
            })
            if (id) {
                this.confirmLoading = true;
                this.model.id = id;
                this.disabled = true;
                await this.$request.get1(this.api.detail + id).then((res) => {
                    if (res.success) {
                        Object.assign(this.model, res.result);
                    }
                    this.confirmLoading = false;
                });
            } else {
                this.resetForm();
            }
            if (pid) {
                this.model.pid = pid
            }
        },
        close() {
            this.visible = false;
        },

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style></style>